class Carousel {
    //首先用constructor 先获取每个元素的属性
    constructor() {
        this.marsk = this.$('marsk');
        this.btn = this.$('jt');
        this.marsk = this.$('marsk');
        this.leftBtn = this.btn.children[0];
        this.rightBtn = this.btn.children[1];
        this.uu = this.marsk.children[0];
        this.lis1 = this.uu.children[0];
        this.lis = this.uu.children;
        this.lisW = this.lis1.offsetWidth;//一张图片的宽度
        this.uu.style.width = this.lisW * (this.lis.length) + 'px'
        this.isNo = 0;
        this.ciccul = false;
    }
    $ = id => document.getElementById(id);
    //鼠标事件
    mouseEvent = () => {

        this.marsk.onmouseenter = () => {

            this.btn.style.display = 'block'
            clearInterval(this.interval)
        }

        this.marsk.onmouseleave = () => {

            this.btn.style.display = 'none'
            this.autoPlay(this.timer)
        }
        //点击左右按钮
        this.rightBtn.onclick =debounce(this.next,200) 
        this.leftBtn.onclick =debounce(this.prev,200) 

    }

    //下一张触发方法
    next = () => {

        this.isNo++

        if (this.isNo === this.lis.length) {
            this.uu.style.left = 0;

            this.isNo = 1
        }
        this.slide()
        this.bindIndecatorActive()
    }

    //上一张触发方法
    prev = () => {
        this.isNo--
        if (this.isNo < 0) {
            this.uu.style.left = -this.lisW * (this.lis.length - 1) + 'px'
            this.isNo = this.lis.length - 2
        }
        this.slide()
        this.bindIndecatorActive()
    }


    //滑动事件方法
    slide() {
        move(this.uu, -this.isNo * this.lisW)
    }
    //封装 创建元素的方法
    _c = tagName => document.createElement(tagName)
    //指示器
    showIndecator() {
        let indexdiv = this._c('div')
        indexdiv.id = 'index'

        for (let i = 0; i < this.lis.length; i++) {
            let span = this._c('span')
            span.className = 'indexs'

            span.innerText = i + 1
            indexdiv.appendChild(span)
            span.onclick = () => {

                this.isNo = i
                this.bindIndecatorActive()
                this.slide()//这里的i 跟isNo的索引相对应直接调用 滑动方法

            }
        }


        this.marsk.appendChild(indexdiv)
        this.indexdiv = indexdiv;//把 indexdiv 变成 实例 下面判断它生成没有
        
        this.bindIndecatorActive()//默认第一张高亮
    }
    //点击指示器高亮
    bindIndecatorActive() {
        if (this.indexdiv) {
            let spans = this.indexdiv.children
            for (let j = 0; j < spans.length; j++) {
                spans[j].className = 'indexs'

            }
            if (this.isNo === this.lis.length - 1 && this.ciccul) {
                spans[0].className = 'indexs color'
                return;
            }
            spans[this.isNo].className = 'indexs color'
        }

    }
    // 无缝轮播方法
    circular = () => {
        //仙客隆第一张图片
        let cloneFirstPic = this.lis1.cloneNode(true)//true开启深度克隆
        this.uu.appendChild(cloneFirstPic)
        this.uu.style.width = this.lis.length * this.lisW + 'px';
        this.ciccul = true;
    }
   // 自动轮播
   autoPlay = timer=>{
       this.timer = timer;
       window.onblur = ()=>{
           clearInterval(this.interval)
       }
       window.onfocus = ()=>{
           this.autoPlay(this.timer)
       }
       this.interval = setInterval(() => {
           
           this.next()
       }, timer);
   }



}














let carousel = new Carousel()
carousel.mouseEvent()//鼠标点击 划入 事件
carousel.showIndecator()//动态生成指示器
carousel.circular()// 克隆图片
carousel.autoPlay(1500)// 克隆图片

